<template>
    <div>
        <!--展示分页-->
        {{courselist}}
        <br>
        
        <van-uploader :after-read='upload'></van-uploader>
        <br>
        <table  border='1px' >
            <tr>
                <td>标题</td>
                <td>图片</td>
                <td>分类</td>
            </tr>
            <tr v-for="i in courselist" >
                <td>{{i.title}}</td>
                <td>{{i.pic}}</td>
                <td>{{i.name}}</td>
            </tr>
        </table>
        <pages :total='total' :page_size='page_size' @pagesize='changepage'/>
    </div>
</template>

<script>
import pages from './pages.vue'
    export default {
        components:{
            'pages':pages
        },
        data() {
            return {
                courselist:[],
                total:0,
                page:1,
                page_size:2,
                token:'',
                url:''
            }
        },
        methods: {
            //展示分页数据
            getcourselist(){
                this.$axios.get("/course/courserpage/?page="+this.page+"&page_size="+this.page_size).then(res=>{
                    this.courselist = res.data.list
                    this.total = res.data.total
                })
            },
            //接收子组件传的页数
            changepage(v){
                this.page = v
                this.getcourselist()
            },
            //获取七牛云token
            getqntoken(){
                this.$axios.get('/course/qntoken/').then(res=>{
                    this.token = res.data.token
                })
            },
            //向七牛云上传图片
            upload(file){
                //图像上传必须有新from  
                let formdata = new FormData
                formdata.append('file',file.file)
                //七牛云上传要有token
                formdata.append('token',this.token)
                //提交数据
                this.$axios.post('http://up-z1.qiniu.com/',formdata).then(res=>{
                    console.log(res)
                    this.url = 'http://r33zmotv2.hb-bkt.clouddn.com/'+res.data.key

                })
            }
        },
        mounted() {
            this.getcourselist()
            this.getqntoken()
        },
    }
</script>

<style scoped>

</style>